import PubSub from "./PubSub.js";

export default class ManageForm extends HTMLElement {
    constructor() {
        super();
        this.attachShadow({mode: "open"})
    }

    connectedCallback() {
        this.shadowRoot.innerHTML = `
            <div>
                <input type="text" name="learning" placeholder="请添加学习清单">
                <button class="learning">添加</button>
            </div>
            <div>
                <input type="text" name="todo" placeholder="请添加代办清单">
                <button class="todo">添加</button>
            </div>
            <style>
                :host { /* <manage-form> */
                    display: flex;
                    align-items: flex-start;
                    flex-direction: column;
                    justify-content: flex-start;
                    gap: 1rem;
                } 
                
                div {
                    width: 100%; 
                    display: grid;
                    grid-template-columns: 3fr 1.5fr;
                    gap: .5rem;
                }   
                
                button {
                    background-color: LightSeaGreen;
                    color: #fff;
                    border: none;
                    border-radius: 10px;
                    padding: 0.5rem 2rem;
                    font-size: 1.2rem;
                }
                
                div + div button {
                    background-color: DarkSeaGreen;
                }
                
                input {
                    border-radius: 10px;
                    padding: .5rem;
                    border: 2px solid var(--text-color, #555);
                    font-size: 1.4rem;
                }
            </style>
        `

        this.shadowRoot.querySelector(".learning").addEventListener("click", this.add_learning_item);
        this.shadowRoot.querySelector(".todo").addEventListener("click", this.add_todo_item);
    }

    add_learning_item(e) {
        const input = e.target.previousElementSibling;
        const title = input.value;
        input.value = "";
        PubSub.publish("learning_item_added", title);
    }

    add_todo_item(e) {
        const input = e.target.previousElementSibling;
        const title = input.value;
        input.value = "";
        PubSub.publish("todo_item_added", title);
    }
}

customElements.define('manage-form', ManageForm)
